<template>
  <div class="am-popup" id="user-popup">
    <div class="am-popup-inner">
      <div class="am-popup-hd">
        <h4 class="am-popup-title">请选择用户</h4>
        <span data-am-modal-close
              class="am-close">&times;</span>
      </div>
      <div class="am-popup-bd">
        <div class="tpl-portlet-components">
          <div class="portlet-title">
            <div class="tpl-portlet-input tpl-fz-ml">
              <div class="portlet-input input-inline" style="width: 265px">
                <div class="input-icon right">
                  <i class="am-icon-search" @click="search"></i>
                  <input v-model="fuzzy" @keyup.enter="search" type="text" class="form-control form-control-solid" placeholder='"可输入微信名" 关键词查看信息'> 
                </div>
              </div>
            </div>
          </div>
          <div class="tpl-block">
            <div class="am-g">
                <table class="am-table am-table-striped am-table-hover table-main">
                  <thead>
                    <tr>
                      <th class="table-id am-hide-sm-only">ID</th>
                      <th class="table-title">用户名</th>
                      <th class="table-type">头像</th>
                      <th class="table-type">类型</th>
                      <th class="table-author am-hide-sm-only">地址</th>
                      <th class="table-set">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(list, index) in lists">
                        <td class="am-hide-sm-only">{{index + 1}}</td>
                        <td>{{list.nickname}}</td>
                        <td><img class="am-circle" :src="list.headimgurl" width="35" height="35"/></td>
                        <td class="am-hide-sm-only">{{list.loginType === '1' ?  '小程序' : '公众号'}}</td>
                        <td class="am-hide-sm-only">{{list.address}}</td>
                        <td>
                          <div class="am-btn-toolbar">
                            <div class="am-btn-group am-btn-group-xs" @click="check(list)">
                                <button class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-check-square-o"></span> 选择</button>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <pager :allCount="allCount" :count="count" :page="page" @changePage="changePage" @renovate="renovate"></pager>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
</template>

<script>
  import * as apis from '../apis'
  export default {
  	name: 'SelectUser',
    data () {
      return {
        lists: [],
        count: 0,
        page: 1,
        pageSize: 10,
        fuzzy: ''
      }
    },
    mounted () {
      this.getCount()
    },
    methods: {
      getCount () {
        apis.selectWxUserCount(this.fuzzy).then(({data: data}) => {
          console.log(data);
          this.allCount = data.result.selectWxUserCount
          this.count = Math.ceil(data.result.selectWxUserCount / this.pageSize)
          if (data && data.result_code === 1 && data.result.selectWxUserCount > 0) {
						this.getLists()
          }
        })
      },
      getLists () {
        apis.selectWxUserList(this.fuzzy, this.page, this.pageSize).then(({data: data}) => {
          if (data && data.result_code === 1 && data.result.selectWxUserList) {
						this.lists = data.result.selectWxUserList
          }
        })
      },
			changePage (page) {
				this.page = page
				this.getLists()
			},
      search () {
        this.getCount()
      },
      check (list) {
        this.$emit('selectUserCheck', list)
        $('#user-popup').modal('toggle')
      },
      renovate (page) {
        this.getCount()
      }
    }    
  }
</script>